<template>
  <div class="text" :class="{box:isBox, boder:isBoder}">
    <div :class="{inner: isInner}">春夏</div>
    <div :class="classObject">秋冬</div>
    <div :class="classMeal">三餐四季</div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
const isBox = ref(true);
const isBoder = ref(true);
const isInner = ref(true);
const classObject = ref({inner:true})
const isMeal = ref(true)
const classMeal = computed(() => {
    return {
        meal: isMeal.value
    }
})
</script>

<style>
.text{text-align: center; line-height: 30px;}
.box{ widows: 100%;background: #f60;}
.boder { border: 1px dotted #000;}
.inner {
    margin-top: 5px;
    width: 100px;
    height: 30px;
    border: 2px double black;
}
.meal {
    width: 100px;
    height: 30px;
    border: 2px dashed rgb(120,81,227);
}
</style>